<template>
  <div>
    <div class="page_space">
      <input-card class="mt-15">
        <inputItem
          v-model="form.code"
          title="检测编号"
          tip="请输入检测编号"
          type="input"
        />
        <inputItem
          v-model="form.reportCode"
          title="关联采样编号"
          tip="请输入采样编号"
          type="input"
        />
        <inputItem
          v-model="form.sampleName"
          title="样品名称"
          tip="请输入样品名称"
          type="input"
        />
        <inputItem
          v-model="form.relationBusinessVarietyCode"
          title="样品自编号"
          tip="请输入样品自编号"
          type="input"
        />
        <inputItem
          v-model="form.intercourseEnterpriseName"
          title="经营主体"
          tip="请输入经营主体"
          type="input"
        />
        <inputItem
          title="采样日期"
          tip="请选择采样日期"
          type="select"
          :content="form.reportDateStart"
          @select="selectTime('start')"
        />
        <inputItem
          title="检测日期"
          tip="请选择检测日期"
          type="select"
          :content="form.reportDateEnd"
          @select="selectTime('end')"
        />
        <inputItem
          title="检测结果"
          tip="请选择检测结果"
          type="select"
          :content="form.resultText"
          @select="toSelect('check')"
        />
      </input-card>
    </div>
    <div class="btn_wrap">
      <button class="btn default middle" @click="reset">重置</button>
      <button class="btn middle" @click="submit">提交</button>
    </div>

    <van-popup v-model="show" position="bottom" :round="true">
      <template v-if="active === 'check'">
        <van-picker
          ref="pickerForResult"
          title="请选择检测结果"
          show-toolbar
          :columns="[
            { text: '全部', value: '' },
            { text: '合格', value: 'Qualified' },
            { text: '不合格', value: 'CANCEL' }
          ]"
          visible-item-count="3"
        />
        <div class="btn_box">
          <button class="btn large" @click="confirmResult">确定</button>
        </div>
      </template>
      <template v-else-if="active === 'time'">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          visible-item-count="3"
        />
        <div class="btn_box">
          <button class="btn large" @click="submitTime">确定</button>
        </div>
      </template>
    </van-popup>
  </div>
</template>

<script>
import inputCard from '@/components/input-card/card'
import inputItem from '@/components/input-card/item'
import { ParseDate } from '@/utils'
import { store, mutations } from '@/observable'

export default {
  name: 'inspectionSearch',
  components: {
    inputCard,
    inputItem
  },
  data() {
    return {
      show: false,
      active: '',
      // 时间picker
      currentDate: new Date(),
      targetTime: '',
      form: {
        code: '',
        reportCode: '',
        sampleName: '',
        relationBusinessVarietyCode: '',
        intercourseEnterpriseName: '',
        reportDateStart: '',
        reportDateEnd: '',
        result: '',
        resultText: ''
      }
    }
  },
  created() {},
  methods: {
    // 重置
    reset() {
      for (let item in this.form) {
        this.form[item] = ''
      }
    },
    // 提交
    submit() {
      let params = { ...this.form }
      delete params.resultText
      params.PAGE = 'inspectionSearch'
      params.TARGET = 'inspectionLedger'
      mutations.setSearch(params)
      this.$router.go(-1)
      console.log("hhh")
    },
    selectTime(type) {
      this.show = true
      this.active = 'time'
      this.targetTime = type
    },
    submitTime() {
      this.show = false
      let formatTime = ParseDate(this.currentDate)
      if (this.targetTime === 'start') {
        this.form.reportDateStart = formatTime
      } else {
        this.form.reportDateEnd = formatTime
      }
    },
    // 检测结果
    confirmResult() {
      let { value, text } = this.$refs.pickerForResult.getValues()[0]
      this.show = false
      this.form.result = value
      this.form.resultText = text
    },
    toSelect(type) {
      this.show = true
      this.active = type
    }
  }
}
</script>
